<html>
<head>
	<title>BlackJackX</title>
	<link rel="stylesheet" type="text/css" href="indexStyles.css">
<?php
session_start();
if(isset($_SESSION['loginFailed'])) {
	if($_SESSION['loginFailed'] === 1) {
		$loginFailed = 1;
	}
} else {
	$loginFailed = 0;
}
?>
	
	<script type="text/javascript">
	function checkForm(){
		if(document.getElementById("email").value =="" || document.getElementById("email").value.indexOf("@") == -1){
			alert("Enter your email-address");
			document.getElementById("email").focus();
			return false;
		}
		if(document.getElementById("password").style.display == block){
			if(document.getElementById("password").value == ""){
			alert('Please enter your password!');
			document.getElementById("password").focus();
				return false;
			}
		}
	}
	
	function alertUser() {	
		var loginFailed = parseInt("<?php echo $loginFailed?>", 10);		
		if(loginFailed == 1) {
			alert('Password is incorrect!');
		}
	}
	</script>
	
</head>
<body onload="alertUser();"bgcolor="#000000" background="login.jpg" leftmargin="20" topmargin="20" bgproperties="fixed"
	style="Background-Repeat:no-repeat;background-position:center;background-position:top;background-size:100%"> 
	<div style="position:absolute; width:300px; height:150px; left: 50%; top:50%; margin: -75px 0 0 -150px;">
		<p>
		<p>
			<div id="login">
		<form id="loginForm" method="post" onsubmit="return checkForm()" action="login.php">
			<table align="center">
				<br>
				<tr>
					<td>
					</td>
					<td style="color:white;">
						E-Mail:
					</td>
					<td>
						<input name="email" id="email" type="text" size="15" maxlength="25" onblur="validateEmail()">
					</td>
					<td style="color:red; text-align:right">
						<p id="emailValid" name="emailValid"></p>
					</td>
				</tr>
				<tr>
					<td>
						<input name="hasPassword" id="hasPassword" type="radio" onchange="changeVisibilityPasswordField(true)" checked>
					</td>
					<td style="color:white;line-height:30px">
						<label for="hasPassword">Password:</label>
					</td>
					<td>
						<input style="25px" name="password" id="password" type="password" size="15" maxlength="25" style="height: 25px">
					</td>
				</tr>
				<tr>
					<td>
						<input name="hasPassword" id="hasNoPassword" type="radio" onchange="changeVisibilityPasswordField(false)">
					</td>
					<td style="color:white;line-height:30px">
						<label for="hasNoPassword">No Password yet</label>
					</td>
				</tr>
				<tr>
					<td>
					</td>
					<td>
					</td>
					<td>
						<input name="submit" id="submit" class="button" type="submit" style="width: 75px" value="Login!">
					</td>
				</tr>
			</table>							
		</form>
		</div>
		<script type="text/javascript">
		
		function changeVisibilityPasswordField(b) {
			var passwordField = document.getElementById("password");
			var submitText = document.getElementById("submit");
			if(b == true)
			{
				password.style.display = 'block';
				submitText.value = "Login!";
				document.getElementById('loginForm').action = "profile.php";
			}
			else{
				password.style.display = 'none';
				submitText.value = "Register";
				document.getElementById('loginForm').action = "register.php";
			}
			setAction(b);
		}
		
		function validateEmail(){
			var eMailToCheck = document.getElementById("email").value;
			if(eMailToCheck!="" && eMailToCheck.indexOf("@") != -1){
				document.getElementById("emailValid").innerHTML = "";
			}
			else{
				document.getElementById("emailValid").innerHTML = "!";
			}
		}
		</script>
	</div>	
</div>
</body>
</html>